import { Component, useState } from "react";
class Son extends Component {
  // 生命周期函数
  // 1.组件挂载完毕自动执行(只执行一次)用于发送网络请求
  componentDidMount() {
    console.log("组件挂载完毕了");
    // 组件挂载完毕开启定时器，将定时器对象挂到this上便于全局访问
    this.timer = setInterval(() => {
      console.log("我是子组件中的定时器");
    }, 1000);
  }
  // 2.组件卸载时自动执行(只执行一次)副作用清除
  componentWillUnmount() {
    console.log("组件即将卸载关闭定时器");
    clearInterval(this.timer);
  }
  state = {};
  render() {
    return (
      <>
        <p>我是子组件</p>
      </>
    );
  }
}

function App() {
  const [show, setShow] = useState(true);
  return (
    <>
      {/* 动态渲染子组件(挂载/卸载) */}
      {show && <Son />}
      <button onClick={() => setShow(!show)}>
        点我{show ? "卸载" : "挂载"}子组件
      </button>
    </>
  );
}

export default App;
